<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>DOM增删改</title>
		<style type="text/css">
			*{
				margin:0;
				padding:0;
			}
			.center{
				width: 800px;
				margin: auto;
			}
			#outer,#btnList,#box{
				float: left;
			}
			#box{
				width: 400px;
				/* height:200px; */
				background-color: bisque;
				border-style: solid;
				border-width: 1px;
				margin: 10px;
				padding: 10px;
			}
			#city li{
				float:left;
				width: 50px;
				height:20px;
				background-color: yellowgreen;
				list-style: none;
				margin: 10px;
				text-align: center;
				border-style: solid;
				border-width: 1px;
			}

			button{
				width: 300px;
				margin: 10px;
			}
		</style>
		
		<script type="text/javascript">
			window.onload = function(){
				//创建个点击函数 绑定btn
				function myClick(idbtn,fun){
					var btn = document.getElementById(idbtn);
					btn.onclick = fun;
				}
				myClick("btn01" ,function(){
					//创建li元素节点
					var li = document.createElement("li");
					//创建广州文本
					var gzText = document.createTextNode("广州");
					//将gzText设置为li的子节点
					li.appendChild(gzText);
					//li添加到city下
					var ul = document.getElementById("city");
					ul.appendChild(li);
				});
				
				myClick("btn02",function(){
					var li = document.createElement("li");
					//创建广州文本
					var gzText = document.createTextNode("广州");
					//将gzText设置为li的子节点
					li.appendChild(gzText);
					
					var ul = document.getElementById("city");
					var bj = document.getElementById("bj");
					
					//插入子节点
					ul.insertBefore(li , bj);
				});
				
				myClick("btn03",function(){
					var li = document.createElement("li");
					//创建广州文本
					var gzText = document.createTextNode("广州");
					//将gzText设置为li的子节点
					li.appendChild(gzText);
					
					var ul = document.getElementById("city");
					var bj = document.getElementById("bj");
					
					//替换子节点
					ul.replaceChild(li,bj);
				});
				
				myClick("btn04" ,function(){
					var ul = document.getElementById("city");
					var bj = document.getElementById("bj");
					ul.removeChild(bj);	
					//另一种写法 常用
					//bj.parentNode.removeChild(bj);
				});
				
				myClick("btn05" ,function(){
					//向ul添加广州
					var ul = document.getElementById("city");
					ul.innerHTML+="<li>广州</li>";
				})
				
				
			}
		</script>
		
	</head>
	<body>
		<div class="center">
		<div id="outer">
			<div id = "box">
			    <p>你选择哪座城市</p>
				<ul id = "city">
					<li id="gz">广州</li>
					<li id="sh">上海</li>
					<li id="bj">北京</li>
					<li id="sz">深圳</li>
				</ul>
			</div>
		</div>
		
		<div id="btnList">
			<div id=""><button type="button" id = "btn01">创建一个广州节点，添加到city里</button></div>
			<div id=""><button type="button" id = "btn02">将广州插入到北京节点前面</button></div>
			<div id=""><button type="button" id = "btn03">使用广州替换北京节点</button></div>
			<div id=""><button type="button" id = "btn04">删除北京节点</button></div>
			<div id=""><button type="button" id = "btn05">创建一个广州节点，添加到city里，通过innerHTML</button></div>
		</div>
		</div>
	</body>
</html>
